<template>
    <!-- 搜索与操作区 -->
    <div style="display: flex">
        <el-select v-model="searchCourseId" placeholder="请选择课程名称" filterable clearable
            @clear="handleSearchCourseIdClear" style="width: 200px;height: 33px;margin-right: 15px;font-size: 15px">
            <el-option v-for="item in courseOptions" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
        <el-select v-model="searchTeachId" placeholder="请选择教师名称" filterable clearable @clear="handleSearchTeachIdClear"
            style="width: 200px;height: 33px;margin-right: 15px;font-size: 15px">
            <el-option v-for="item in teacherOptions" :key="item.id" :label="item.username"
                :value="item.id"></el-option>
        </el-select>
        <el-button type="primary" style="color: #fff;font-size: 12px;background-color: #1890ff;" @click="load">搜索
        </el-button>
    </div>

    <!-- 视频列表表格 -->
    <el-table :data="tableData" :row-style="{ height: '77px' }"
        style="width: calc(100vw - 240px);height: 70vh;margin-top: 20px;font-size: 15px;" border>
        <!-- 表格列 -->
        <el-table-column prop="courseName" label="课程名称" width="auto" align="center" />
        <el-table-column prop="teachName" label="教师名称" width="auto" align="center" />
        <el-table-column prop="startTime" label="开始时间" width="auto" align="center" />
        <el-table-column prop="endTime" label="结束时间" width="auto" align="center" />
        <el-table-column label="操作" fixed="right" width="200" align="center">
            <template v-slot="scope">
                <div>
                    <el-button icon="View" size="small" type="success" @click="videoLinePlay(scope.row)">播放</el-button>
                    <el-button icon="Download" size="small" type="warning"
                        @click="download(scope.row.url)">下载</el-button>
                </div>
            </template>
        </el-table-column>
    </el-table>

    <!--      分页-->
    <div style="margin-top: 10px">
        <el-pagination :current-page="currentPage" :page-size="pageSize" :page-sizes="[10, 20, 30, 50]"
            layout="total, sizes, prev, pager, next, jumper" :total="total" :background="true"
            @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>

    <el-dialog :close-on-click-modal="false" v-model="dialogVideoVisible" title="视频播放" @close="closedialogVisible">
        <div class="video-monitor-wrapper">
            <video class="videoPlayer" :src="videoUrl" controls style="width: 100%;height: 100%" @play="playVideo"
                ref="vueMiniPlayer" type="video/mp4">
            </video>
        </div>
    </el-dialog>
</template>

<script>
import { serverIp } from "~/utils/config.js"
import request from "~/utils/request.js";
export default {
    data() {
        return {
            dialogVideoVisible: false,
            dialogVisible: false,
            form: {},
            courseOptions: [],
            teacherOptions: [],
            videoUrl: "",
            tableData: [],
            searchCourseId: '',
            searchTeachId: '',
            currentPage: 1,
            pageSize: 10,
            total: 0,
        }
    },
    created() {
        this.load()
        this.getCourseOptions()
        this.getTeacherOptions()
    },
    methods: {
        load() {
            if (this.searchCourseId === undefined) {
                this.searchCourseId = ''
            }
            if (this.searchTeachId === undefined) {
                this.searchTeachId = ''
            }
            request.get("/live-playback/stuPage", {
                params: {
                    pageNum: this.currentPage,
                    pageSize: this.pageSize,
                    stuId: this.$store.state.user.id,
                    courseId: this.searchCourseId,
                    teachId: this.searchTeachId
                }
            }
            ).then(res => {
                if (res.code === '200') {
                    this.tableData = res.data.records;
                    this.total = res.data.total;
                } else {
                    ElMessage.error("错误" + res.msg)
                }
            })
        },
        getCourseOptions() {
            request.get("/course/all").then(res => {
                this.courseOptions = res.data
            })
        },
        getTeacherOptions() {
            request.get("/user/selectTeachers").then(res => {
                this.teacherOptions = res.data
            })
        },
        videoLinePlay(row) {
            this.videoUrl = serverIp + row.url;
            this.dialogVideoVisible = true;
        },
        download(url) {
            const fileName = `${encodeURIComponent(url.split('/').pop())}`
            window.open(serverIp + "/api/files/download/" + fileName)
        },
        handleCurrentChange(item) {
            // 改变当前页码触发
            this.currentPage = item
            this.load()
        },
        handleSizeChange(item) {   // 改变当前每页的个数触发
            this.pageSize = item
            this.load()
        },
        // 监听vidoe播放的事件
        playVideo() {
            this.$store.commit("changePlayState", false);
        },
        closedialogVisible() {
            this.$refs.vueMiniPlayer.pause();//暂停
        },
        // 清空教师id
        handleSearchTeachIdClear() {
            this.searchTeachId = ''
        },
        // 清空课程id
        handleSearchCourseIdClear() {
            this.searchCourseId = ''
        }
    }
}
</script>

<style scoped>
.video-monitor-wrapper {
    width: 80%;
    height: 70%;
    text-align: center;
    margin: 25px auto 15px auto;
}
</style>
